<template>
  <div class="areaComponent" v-if="oItem">
    <div class="item">
      <div class="left">必填</div>
      <div class="right">
        <el-switch v-model="oItem.required" active-color="#0079fe" inactive-color="#dddddd" @change="requiredChange">
        </el-switch>
      </div>
    </div>
    <div class="item">
      <div class="left">标题</div>
      <div class="right">
        <el-input placeholder="请输入标题内容" v-model="oItem.title" :maxlength="50" @input="titleInputChange" clearable>
        </el-input>
      </div>
    </div>
    <div class="item">
      <div class="left">说明文字</div>
      <div class="right">
        <el-input placeholder="请输入说明文字" v-model="oItem.desc" :maxlength="100" @input="descInputChange" clearable>
        </el-input>
      </div>
    </div>
    <div class="item">
      <div class="left">提示语</div>
      <div class="right">
        <el-input placeholder="请输入" v-model.trim="oItem.placeholder" :maxlength="50" @input="placeholderInputChange"
          clearable>
        </el-input>
      </div>
    </div>
    <div class="item">
      <div class="left">{{oItem.search.title}}</div>
      <div class="right">
        <el-radio-group v-model="oItem.search.value" @change="searchTypeChange">
          <el-radio v-for="osl in oItem.search.list" :key="osl.id" :label="osl.id">{{osl.name}}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="item">
      <div class="left"></div>
      <div class="right">
        <el-select v-model="provinceCode" placeholder="请选择省份" @change="provinceChange" clearable>
          <el-option v-for="item in addressData" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="cityCode" placeholder="请选择城市" v-if="oItem.search.value>1" @change="cityChange" clearable>
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="areaCode" placeholder="请选择区县" v-if="oItem.search.value==3" @change="areaChange" clearable>
          <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
  import addressData from "@/static/js/addressData.js";
  import Bus from "@/utils/bus";
  export default {
    name: "areaComponent",
    data() {
      return {
        pageName: "地区组件",
        addressData,
        provinceCode: "",
        provinceName: "",
        cityList: [],
        cityCode: "",
        cityName: "",
        areaList: [],
        areaCode: "",
        areaName: "",
        oItem: null
      }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
      if (this.item) {
        this.oItem = this.item;
      }
    },
    methods: {
      //切换是否必填的状态
      requiredChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.required = this.oItem.required;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          required: this.oItem.required
        })
      },
      //监听输入标题的事件
      titleInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.title = this.oItem.title;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          title: this.oItem.title
        })
      },
      //监听输入文字描述的事件
      descInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.desc = this.oItem.desc;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          desc: this.oItem.desc
        })
      },
      //监听输入提示语的事件
      placeholderInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.placeholder = this.oItem.placeholder;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          placeholder: this.oItem.placeholder
        })
      },
      //省份列表下拉选择的事件
      provinceChange() {
        let value = "";
        if (this.provinceCode) {
          this.addressData.forEach(pro => {
            if (pro.value == this.provinceCode) {
              this.provinceName = pro.label;
              value = pro.label;
              this.cityList = pro.children;
              this.cityCode = "";
              this.cityName = "";
              this.areaList = [];
              this.areaCode = "";
              this.areaName = "";
            }
          })
        }else{
          this.provinceName = "";
          this.cityList = [];
          this.cityCode = "";
          this.cityName = "";
          this.areaList = [];
          this.areaCode = "";
          this.areaName = "";
          value = "";
        }

        this.oItem.value = value;
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.value = value;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          value: value
        })
      },
      //城市列表下拉选择的事件
      cityChange() {
        let value = this.oItem.value;
        if(this.cityCode) {
          this.cityList.forEach(cit => {
            if (cit.value == this.cityCode) {
              this.cityName = cit.label;
              value = value + ">" + cit.label;
              this.areaList = cit.children;
              this.areaCode = "";
              this.areaName = "";
            }
          })
        } else {
          this.cityName = "";
          this.areaList = [];
          this.areaCode = "";
          this.areaName = "";

          if(value.indexOf(">")>-1) {
            let newValue = value.split(">");
            if(newValue.length>=2) {
              value = newValue[0];
            }
          }
        }

        this.oItem.value = value;
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.value = value;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          value: value
        })
      },
      //区县列表下拉选择的事件
      areaChange() {
        let value = this.oItem.value;
        if(this.areaCode) {
          this.areaList.forEach(are => {
            if (are.value == this.areaCode) {
              this.areaName = are.label;
              value = value + ">" + are.label;
            }
          })
        } else {
          this.areaName = "";
          if(value.indexOf(">")>-1) {
            let newValue = value.split(">");
            if(newValue.length==3) {
              value = newValue[0] + ">" + newValue[1];
            }
          }
        }
        this.oItem.value = value;
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if (row.id === this.oItem.id) {
            row.value = value;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          value: value
        })
      },
      //选择筛选条件时触发的事件
      searchTypeChange(){
        let type = this.oItem.search.value;
        if(type == 1) {
          if(this.oItem.value.indexOf(">")>-1) {
            let value = this.oItem.value.split(">");
            this.oItem.value = value[0];
            let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
            setFormContent.forEach(row => {
              if (row.id === this.oItem.id) {
                row.value = this.oItem.value;
              }
            })
            localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
            Bus.$emit(`${this.item.ename}${this.item.id}`, {
              value: this.oItem.value
            })
          }
        }
        if(type==2) {
          let value = ""
          if(this.oItem.value.indexOf(">")>-1) {
            value = this.oItem.value.split(">");
            if(value.length>=2) {
              this.oItem.value = value[0] + ">" + value[1];
            }
          }else{
            if(this.cityName) {
              this.oItem.value = this.oItem.value + ">" + this.cityName;
            }
          }

          let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
          setFormContent.forEach(row => {
            if (row.id === this.oItem.id) {
              row.value = this.oItem.value;
            }
          })
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit(`${this.item.ename}${this.item.id}`, {
            value: this.oItem.value
          })
        }

        if(type==3) {
          let value = ""
          if(this.oItem.value.indexOf(">")>-1) {
            value = this.oItem.value.split(">");
            if(value.length==2) {
              this.oItem.value = value[0] + ">" + value[1];
              if(this.areaName) {
                this.oItem.value = this.oItem.value + ">" + this.areaName;
              }
            }
            if(value.length==3) {
              this.oItem.value = value[0] + ">" + value[1] + ">" + value[2];
            }
          }else{
            if(this.cityName) {
              this.oItem.value = this.oItem.value + ">" + this.cityName;
              if(this.areaName) {
                this.oItem.value = this.oItem.value + ">" + this.areaName;
              }
            }
          }

          let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
          setFormContent.forEach(row => {
            if (row.id === this.oItem.id) {
              row.value = this.oItem.value;
            }
          })
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit(`${this.item.ename}${this.item.id}`, {
            value: this.oItem.value
          })
        }
      }
    },
    computed: {},
    watch: {},
  }
</script>
<style scoped lang="scss">
  .areaComponent {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .left {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
        box-sizing: border-box;
        font-size: 14px;
        color: #888;
      }
      .right{width:70%;
        .el-select{margin-bottom: 20px;}
      }
    }
  }
</style>
